<template>
  <div class="DetailsCustomerTrajectory">
    <div class="noData" v-show="pageData.total == 0">暂无数据</div>
    <div :style="{'height': onresizeHeight,'overflow':'auto'}" ref="TimelineHeight" class="TimelineHeight">
      <div v-for="(item,index) in customerFootprintData" :key="index">
        <Divider orientation="left" class="item_date">{{item.date}}</Divider>
        <Timeline>
          <template v-for="(itemK,index) in item.customerDynamicDTOS">
            <!-- actionCode：      动作类型 （1: 创建客户 2：从其他案场加入客户 3：发送置业计划书 4：签到 5： 阅读置业计划书 6：分享置业计划书  7:分配客户 8：代为接待客户）  -->
            <!-- 1 === 创建客户 -->
            <TimelineItem v-if="itemK.actionCode == 1" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}</div>
            </TimelineItem>
            <!-- 2 === 从其他案场加入客户 -->
            <TimelineItem v-if="itemK.actionCode == 2" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}</div>
            </TimelineItem>
            <!-- 3 === 向客户发送置业报告 -->
            <TimelineItem v-if="itemK.actionCode == 3" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}（{{itemK.actionExtend}}）</div>
            </TimelineItem>
            <!-- 4 === 签到 -->
            <TimelineItem v-if="itemK.actionCode == 4" :key="index">
              <div class="time_line_title"><span>{{itemK.customerName}}</span><span v-if="itemK.customerPhone">（{{itemK.customerPhone}}）</span></div>
              <div class="time_line_content">{{itemK.actionName}}</div>
            </TimelineItem>
            <!-- 5 === 阅读置业计划书 -->
            <TimelineItem v-if="itemK.actionCode == 5" :key="index">
              <div class="time_line_title"><span>{{itemK.customerName}}</span><span v-if="itemK.customerPhone">（{{itemK.customerPhone}}）</span></div>
              <div class="time_line_content">{{itemK.actionName}} <span v-if="itemK.actionExtend">（{{itemK.actionExtend}}）</span> </div>
            </TimelineItem>
            <!-- 6 === 向客户发送置业报告 -->
            <TimelineItem v-if="itemK.actionCode == 6" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}（{{itemK.actionExtend}}）</div>
            </TimelineItem>
            <!-- 7 === 分配客户 -->
            <TimelineItem v-if="itemK.actionCode == 7" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}</div>
            </TimelineItem>
            <!-- 8 === 代为接待客户 -->
            <TimelineItem v-if="itemK.actionCode == 8" :key="index">
              <div class="time_line_title"><span>{{$tool.dateFtt('hh:mm',itemK.createTime)}}</span><span>{{itemK.userName}}</span></div>
              <div class="time_line_content">{{itemK.actionName}}</div>
            </TimelineItem>
          </template>  
        </Timeline>
      </div>
    </div>
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount">
        当前第 {{pageData.page}} 页，
        当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
        共 {{pageData.total}} 条
      </div>
      <Page class="pager" :total="pageData.total" :pageSize="pageData.rows" :current="pageData.page" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" placement="top" show-elevator show-sizer />
    </div>
  </div>
</template>
<script>
  import { customerFootprint, webGetCustomerDynamicList } from "@/api/customerManagement.js";
  export default {
    components: {

    },
    props: ['servicePersonnelId'],
    data() {
      return {
        customerFootprintData: [],
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50]
        },
        onresizeHeight:0,
      }
    },
    methods: {
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        this.pageData.page = page;
        this.initData();
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows;
        this.pageData.page = 1;
        this.initData();
      },
      // 初始化获取数据
      initData() {
        let params = {
          userCustomerId:this.$route.query.userCustomerId,
          buildingId:this.$route.query.buildingId,
          // userId: JSON.parse(this.$tool.getStorage('userMess')).userId,
          type:1,
          customerId: this.$route.query.customerId,
          page: this.pageData.page,
          rows: this.pageData.rows
        }
        webGetCustomerDynamicList(params).then(res=>{
          console.log(res,'客户动态')
          if (res && res.list) {

            this.customerFootprintData = this.getformatData(res.list)
            this.pageData.total = Number(res.total)
          } else {
            this.pageData.total = 0
            this.customerFootprintData = []
          }
        }).catch(err=>{
          this.$Message.error(err)
        })
      },
      getformatData(sortData){
          const groupBy = (array,f)=>{
            let groups = {};
            let group = '';
            array.forEach((o) => {
              group = JSON.stringify(f(o));
              groups[group] = groups[group] || [];
              groups[group].push(o);
            });
            console.log(groups,'groupsgroupsgroups')
            return Object.keys(groups).map((group)=>{
              return {
                customerDynamicDTOS:groups[group],
                date:groups[group][0].createDate
              };
            })
          }
          const sorted = groupBy(sortData,(item)=>{
            return item.createDate
          })
          return sorted
        }
        
    },
    computed: {

    },
    created() {
      // 初始化获取数据
      this.initData()
      this.$nextTick(() => {
        console.log(this.$refs.TimelineHeight)
        this.onresizeHeight =window.innerHeight - this.$refs.TimelineHeight.offsetTop - 180 +'px';
      });
      
    },
    mounted() {

    },
    watch: {},
  }
</script>
<style lang="scss" scoped>
.DetailsCustomerTrajectory{
  margin-top: 16px;
  .ivu-timeline-item-content{
    padding-bottom: 0;
  }
  p{
    margin-bottom: 4px;
    span:nth-child(1){
      display: inline-block;
      width: 300px;
    }
  }
  .time_line_title{
    color: #194fe8;
    margin-bottom: 20px;
    font-size: 15px;
    span:nth-child(1){
      display: inline-block;
      width: 200px;
      margin-right: 20px;
    }
  }
  .time_line_content{
    font-size: 15px;
  }
  .item_date{
    font-size: 20px;
  }
}
/* page */
.pagePublicStyle {
  width: 100%;
  margin: 14px 0;
  height: 32px;
  .totalCount {
    position: absolute;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    vertical-align: top;
    color: #657180;
  }
  .pager {
    display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 20px;
    background-color: #fff;
    padding-left: 50px;
  }
}
.noData{
  width: 100%;
  font-size: 16px;
  text-align: center;
  padding: 50px 0;
}
</style>
